<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>题目搜索</title>
  <link rel="icon" href="image/网页图标.png" type="image/x-icon">

  <script src="http://47.106.66.89:8080/js/vue.min.js"></script>
  <script src="http://47.106.66.89:8080/js/axios.min.js"></script>
  <link  href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
  <script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
  <script src="js/top.js"></script>

  <style>
    *{
      padding: 0;
      margin: 0;
    }
    html, body, #app {
      width: 100%;
      height: 100%;
      font-size: 14px;
    }
    .el-container{
      width: 100%;
      height: 100%;
    }
    .el-header{
      width: 100%;
      padding: 0%;
    }

    /* 卡片 */
    .c1{
      width: 100%;
      height: 100%;
      font-size: 35px;
    }

    /* 弹出 */
    .d1{
      width: 200px;
      height: 400px;
      position: absolute;
      z-index: 100;
      left: 10%;
    }

    /* 浮动 */
    .f{
      float: left;
    }

    .i1{
      position: relative;
      top: -15px;
    }

    .p1{
      margin: 8px 10px 0 10px;
      text-decoration: none;
      color: #333333;
    }
    .user{
      float: right;
      position: relative;
      left: -40px;
      top: 15px;
    }
    .top1{
      width: 100%;
      height: 10%;
      font-size: 20px;
      background-color: #DCDFE6;
      display: flex;
      align-items: center; /* 可选，用于垂直居中 */
    }
    .t1 > p{
      margin-right: 6px;
    }
    .t22{
      margin-left: 7%;
      display: flex;
      align-items: center; /* 可选，用于垂直居中 */
    }
    .down1{
      width: 100%;
      height: 120%;
    }
    .r{
      float: right;
    }
    .o1{
      position: relative;
      left: 20px;
      top: 20px;
    }
    .grid3{
      display: grid;
      grid-template-columns: auto auto auto;
    }
    .r{
      float: right;
    }
    .flex-container {
      display: flex;
      justify-content: space-between; /* 这将内容分散在容器的两端 */
      align-items: center; /* 这将垂直对齐内容 */
    }

    .content-wrapper {
      /* 根据需要调整宽度，这里假设它占据大部分空间 */
      flex: 1;
    }

    .right-aligned-content {
      /* 使用文本对齐来右对齐内容 */
      text-align: right;
      /* 如果你想为这部分内容设置固定的宽度，可以在这里添加 */
      /* width: 200px; 或其他你需要的值 */
    }

    .right-aligned-content>span{
      margin-right: 120px;
      font-size: 20px;
    }

    /* 其他可能的样式，如删除按钮的样式等 */
    .delete-btn {
      margin-right: 10px;
      margin-left: 10px;
    }
  </style>

</head>
<body>

<div id="app">
  <el-container>
    <!-- 头部 -->
    <el-header height="12%">
      <top @getuser="user">
      </top>
    </el-header>
    <!-- 身体 -->
    <el-main>
      <!--      头部- 类别名，总题/已刷题/未刷题数量，分类，搜索，开始刷题-->
      <div class="top1">
        <div class="f"><p style="font-size: 30px; margin-right: 30px;margin-left: 10px">题目收藏</p></div>
        <div class="f"><p style="margin-right: 80px">总收藏数： {{questionNum.all}}</p></div>

        <!--        时间区间-->
        <div class="f">
          <div class="block">
            <span>刷题时间</span>
            <el-date-picker
                    @change="gettime"
                    v-model="search.value1"
                    value-format="yyyy-MM-dd hh:mm:ss"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
            </el-date-picker>
          </div>
        </div>

        <div class="t22 f">
          <el-input v-model="search.input" placeholder="请输入内容"></el-input>
          <el-button type="primary" plain @click="query">搜索</el-button>
        </div>
      </div>

      <div class="top1" style="background-color: #ffffff; padding: 0; margin: 0;">
        <table border="1" style="width: 100%; border-collapse: collapse;">
          <tr>
            <th style="width: 53%">题目</th>
            <th style="width: 9%">收藏时间</th>
            <th style="width: 10%">操作</th>
          </tr>
        </table>
      </div>

      <!--      无限滚轮显示题目-->
      <div class="down1">
        <el-card infinite-scroll-delay="500" v-infinite-scroll="queryNext">
          <div v-for="q in questionPage.records" class="flex-container" style="margin-bottom: 10px">
            <div class="content-wrapper">
              <el-tag>{{ q.type }}</el-tag>
              <span v-if="q.content.length > 60">{{ q.content.substring(0, 60) }}...</span>
              <span v-else>{{ q.content }}</span>
            </div>
            <div class="right-aligned-content">
              <span>{{ q.docreate }}</span>
              <el-button type="primary" plain @click="open(q)">详情</el-button>
              <el-button type="danger" icon="el-icon-delete" circle class="delete-btn" @click.stop.prevent="del(q.cid)"></el-button>
            </div>
          </div>
        </el-card>
      </div>
    </el-main>
  </el-container>

  <!--    弹窗-->
  <el-dialog title="题目详情" :visible.sync="qus">
    <!-- 题目显示 -->
    <div>
      <p style="margin-bottom: 10px">{{ one.content }}</p>
      <img :src="one.image">
    </div>

    <!-- 根据题目类型显示不同的答案部分 -->
    <div v-if="one.type === '填空题'">
      <p>正确答案: {{ formattedCorrectAnswers }}</p>
    </div>
    <div v-if="['单选题', '多选题'].includes(one.type)">
      <p>题目选项:</p>
      <ol type="A" class="o1" style="margin-bottom: 30px">
        <li v-for="(option, index) in one.items.split(';')" :key="index">
          <input type="checkbox" :disabled="true" :checked="one.items.split(';').includes(option.replace(/^\$/, ''))">
          {{ option.replace(/^\$/, '') }}
          <!-- 假设 answer 是一个包含所有选中选项的字符串，用 ';' 分隔 -->
        </li>
      </ol>
    </div>
    <div v-if="one.type === '判断题'">
      <p>正确答案: {{ one.items ? '对' : '错' }}</p>
    </div>
    <div v-if="one.type === '问答题'">
      <p>答案:</p>
      <textarea disabled>{{ one.items }}</textarea>
    </div>

    <div slot="footer" class="dialog-footer">
      <el-button @click="qus = false">取 消</el-button>
      <!-- 注意：你可能想要为“确定”按钮添加一个实际的点击事件处理器 -->
    </div>
  </el-dialog>
</div>

<script>
  let app = new Vue({
    el: '#app',
    data: {
      uid: null,
      search:{
        input: '',
        value1: [],
        start: "",
        end: ""},
      questionNum:{all:0},    //获取数量
      qus: false,
      one: {},
      showEditor: false,
      questionOne:{type:'', content:'', course:'', items:'', ideas:''},
      questionPage: {current:1, size:20, records:[]}
    },
    created() {
    },
    watch: {
      uid(newVal, oldVal) {
        if (newVal !== oldVal) {
          this.query();
          this.getsum();
        }
      }
    },
    methods: {
      //组件自定义方法
      user(info){
        this.uid = info.id;
      },
      //获取当天做的题目数量
      getsum(){
        axios.get("cloud-other/collection/getsum", {
          params: {
            uid: this.uid
          }
        }).then(res=>{
          if(res.data.code == 1){
            this.questionNum.all = res.data.data;
          }
        });
      },
      gettime(value1) {
        //定义开始结束时间
        if (value1 != null) {
          this.search.start = value1[0];
          this.search.end = value1[1];
        }else{
          this.search.start ='';
          this.search.end ='';
        }
      },
      open(obj){
        this.qus = true;
        this.one = obj;
      },
      //多条件查询获取题目
      query(){
        axios.get("cloud-other/collection/getqusetion",{
          params:{
            page: this.questionPage.current,
            size: this.questionPage.size,
            input: this.search.input,
            uid: this.uid,
            start: this.search.start,
            end: this.search.end
          }
        }).then(res=>{
          if(this.questionPage.current == 1){
            this.questionPage = res.data;
            this.questionNum.all = this.questionPage.total;
          }else{
            let oldRecords = this.questionPage.records;
            this.questionPage = res.data;
            oldRecords = oldRecords.concat(this.questionPage.records);
            this.questionPage.records = oldRecords;
          }
        })
      },
      queryNext(){
        if(this.questionPage.pages && this.questionPage.current < this.questionPage.pages){
          this.questionPage.current++;
          this.query();
        }
      },
      del(cid){
        // 弹出确认框
        if (confirm("确定要删除这条记录吗？")) {
          //开始删除
          axios.get("cloud-other/collection/del?id="+cid).then(res=>{
            if(res.data.code == 1){
              //删除成功
              this.$message('删除成功');
              this.query();
            }else{
              this.$alert(res.data.msg);
            }
          });
        } else {
          // 如果用户点击了"取消"，则不执行任何操作
          this.$message('取消删除');
        }
      }
    },
    computed: {
      // 计算属性来格式化正确答案
      formattedCorrectAnswers() {
        if (!this.one.items) return ''; // 如果没有items，则返回空字符串
        const answers = this.one.items.split(';'); // 使用分号分割字符串
        if (answers.length === 1) {
          // 如果只有一个答案，直接返回
          return answers[0];
        } else {
          // 如果有多个答案，将分号替换为、并返回
          return answers.join('、');
        }
      }
    }
  });
</script>

</body>
</html>